<template>
    <view class="_tabbar">
        <view class="_tabbar-box flexrow">
            <view class="_tabbar-item flexcolumn" @tap="toPage('/pages/home/order', 0)">
                <uni-icons type="home-filled" size="20" color="#F56C6C" v-if="index === 0"></uni-icons>
                <uni-icons type="home-filled" size="20" color="#C0C4CC" v-else></uni-icons>
                <text class="txt" :class="{ active: index === 0 }">订单</text>
            </view>
            <view class="_tabbar-item flexcolumn" @tap="toPage('/pages/home/goods', 1)">
                <uni-icons type="fire-filled" size="20" color="#F56C6C" v-if="index === 1"></uni-icons>
                <uni-icons type="fire-filled" size="20" color="#C0C4CC" v-else></uni-icons>
                <text class="txt" :class="{ active: index === 1 }">商品</text>
            </view>
            <view class="_tabbar-item flexcolumn" @tap="toPage('/pages/home/user', 2)">
                <uni-icons type="staff-filled" size="20" color="#F56C6C" v-if="index === 2"></uni-icons>
                <uni-icons type="staff-filled" size="20" color="#C0C4CC" v-else></uni-icons>
                <text class="txt" :class="{ active: index === 2 }">我的</text>
            </view>
        </view>
    </view>
</template>

<script setup>
const props = defineProps({
    index: {
        type: Number,
        default: 0
    }
})

const toPage = (url, curr) => {
    if (props.index === curr) {
        return false
    }
    uni.switchTab({
        url
    })
}
</script>

<style lang="scss" scoped>
._tabbar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99;
    box-shadow: rgba(0, 0, 0, 0.05) 0 0 16rpx 4rpx;
    &-item {
        flex: 1;
        justify-content: center;
        align-items: center;
        height: 100rpx;
        .txt {
            font-size: 24rpx;
            line-height: 32rpx;
            color: #C0C4CC;
            &.active {
                color: #F56C6C;
            }
        }
    }
}
</style>